<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.game_hash" filterable remote :remote-method="getGameName" style="width:260px"
                      placeholder='请选择游戏' :loading="nameLoading">
                <Option v-for="(option, index) in gameNameOption" :value="option.value" :key="index">{{ option.label }}</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.openid" :clearable="true" style="width:260px" placeholder="请输入OpenId" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.nickname" :clearable="true" style="width:260px" placeholder="请输入用户昵称模糊查询" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.id" :clearable="true" style="width:260px" placeholder="请输入用户ID" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.black" filterable style="width:160px" :clearable="true"
                      placeholder='请选择黑名单状态'>
                <Option value="0">正常</Option>
                <Option value="1">封禁</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
      <Tag size="large">实时在线人数: {{ onlineUserCount }}</Tag>
    </Row>
    <Row style="margin-top: 10px">
      <Col span="24">
        <Card>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover />
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
                  @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total />
          </div>
        </Card>
      </Col>
    </Row>
    <Modal
      v-model="reOpenParms.show"
      title="您确定要解封该用户吗"
      @on-ok="reOpen"
      @on-cancel="resetReOpenParms">
      <p class="primary">是否解封将扣除一半道具？</p>
      <p>
        <RadioGroup v-model="reOpenParms.isDelItem">
          <Radio label="no">
            <Icon type="ios-close-circle" />
            <span>否</span>
          </Radio>
          <Radio label="yes">
            <Icon type="ios-checkmark-circle" />
            <span>是</span>
          </Radio>
        </RadioGroup>
      </p>
      <p>是否移除强化等级为19和大于19的装备？</p>
      <p>
        <RadioGroup v-model="reOpenParms.isDelEquipment">
          <Radio label="no">
            <Icon type="ios-close-circle" />
            <span>否</span>
          </Radio>
          <Radio label="yes">
            <Icon type="ios-checkmark-circle" />
            <span>是</span>
          </Radio>
        </RadioGroup>
      </p>
    </Modal>
    <Modal v-model="keySetting.show" width="996" :styles="{top: '30px'}">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert" />
        <span>角色列表</span>
      </p>
      <div>
        <Table :loading="keySetting.listLoading" :columns="keyColumnsList" :data="keyData" border disabled-hover />
      </div>
      <div slot="footer" style="text-align: center">
        <Page :total="keyShow.listCount" :current="keyShow.currentPage" :page-size="keyShow.pageSize"
              @on-change="changeKeyPage" @on-page-size-change="changeKeySize" show-elevator show-sizer show-total />
      </div>
    </Modal>
  </div>
</template>
<script>
import { getList, blackUser, rankBlackUser, onlineCount, roleList } from '@/api/game-user'
import { mute } from '@/api/game-chat'
import { getChoose } from '@/api/game-manager'
const editButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要封禁该用户吗?',
        transfer: true
      },
      on: {
        'on-ok': () => {
          blackUser({
            id: currentRow.id,
            game_hash: currentRow.game_hash
          }).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting,
          disabled: currentRow.black === 1
        }
      }, '封禁')
    ])
  }
}
const outButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Button', {
      style: {
        margin: '0 5px'
      },
      props: {
        type: 'primary',
        placement: 'top',
        loading: currentRow.isDeleting,
        disabled: currentRow.black === 0
      },
      on: {
        'click': () => {
          vm.reOpenParms.show = true
          vm.reOpenParms.game_hash = currentRow.game_hash
          vm.reOpenParms.id = currentRow.id
          currentRow.loading = false
        }
      }
    }, '解封')
  }
}
const deleteButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.del) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要禁言该玩家吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          let muteParams = {
            openid: currentRow.openid,
            game_hash: currentRow.game_hash,
            mute: 1
          }
          mute(muteParams).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '禁言')
    ])
  }
}
const deleteMuteButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.del) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要解除该玩家的禁言吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          let muteParams = {
            openid: currentRow.openid,
            game_hash: currentRow.game_hash,
            mute: 0
          }
          mute(muteParams).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'primary',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '解禁')
    ])
  }
}
const rankBlackButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要封榜该用户吗?',
        transfer: true
      },
      on: {
        'on-ok': () => {
          rankBlackUser({
            id: currentRow.id,
            game_hash: currentRow.game_hash
          }).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '封榜')
    ])
  }
}
const rankOutButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.edit) {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要解封该黑榜用户吗?',
        transfer: true
      },
      on: {
        'on-ok': () => {
          rankBlackUser({
            id: currentRow.id,
            game_hash: currentRow.game_hash
          }).then(response => {
            vm.$Message.success(response.data.msg)
            vm.getList()
          })
          currentRow.loading = false
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'primary',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '解榜')
    ])
  }
}
const keyButton = (vm, h, currentRow, index) => {
  if (vm.buttonShow.key) {
    return h('Button', {
      props: {
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.buildKeyInfo.uid = currentRow.id
          vm.buildKeyInfo.game_hash = currentRow.game_hash
          vm.getKeyList()
          vm.keySetting.show = true
          vm.keySetting.index = index
        }
      }
    }, '角色')
  }
}
export default {
  name: 'operate-order',
  data () {
    return {
      nameLoading: false,
      onlineUserCount: 0,
      gameNameOption: [],
      gameShow: {},
      columnsList: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center'
        },
        {
          title: '所属游戏',
          align: 'center',
          render: (h, params) => {
            this.getGameName()
            return h('span', this.gameShow[params.row.game_hash])
          },
          width: 120
        },
        {
          title: 'openid',
          align: 'center',
          key: 'openid',
          tooltip: true,
          minWidth: 280
        },
        {
          title: '用户昵称',
          align: 'center',
          key: 'nickname',
          minWidth: 140
        },
        {
          title: 'UID',
          align: 'center',
          key: 'id',
          minWidth: 100
        },
        {
          title: '头像',
          align: 'center',
          width: 200,
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.avatar_url,
                width: 100
              }
            })
          }
        },
        {
          title: '贵族等级',
          align: 'center',
          key: 'vip',
          minWidth: 80
        },
        {
          title: '消耗点券',
          align: 'center',
          key: 'vip_cost',
          minWidth: 100
        },
        {
          title: '点券余额',
          align: 'center',
          key: 'coin',
          minWidth: 100
        },
        {
          title: '注册时间',
          align: 'center',
          key: 'create_date',
          width: 120
        },
        {
          title: '操作',
          align: 'center',
          width: 320,
          render: (h, params) => {
            let editDiv = []
            editDiv.push(keyButton(this, h, params.row, params.index))
            if (params.row.black === 0) {
              editDiv.push(editButton(this, h, params.row, params.index))
            } else {
              editDiv.push(outButton(this, h, params.row, params.index))
            }
            if (params.row.mute === 0) {
              editDiv.push(deleteButton(this, h, params.row, params.index))
            } else {
              editDiv.push(deleteMuteButton(this, h, params.row, params.index))
            }
            if (params.row.rank_black === 0) {
              editDiv.push(rankBlackButton(this, h, params.row, params.index))
            } else {
              editDiv.push(rankOutButton(this, h, params.row, params.index))
            }
            return h('div', editDiv)
          }
        }
      ],
      tableData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        game_hash: '',
        openid: '',
        nickname: '',
        id: '',
        black: ''
      },
      keySetting: {
        show: false,
        loading: false,
        listLoading: false,
        index: 0
      },
      keyColumnsList: [
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center'
        },
        {
          title: '所属游戏',
          align: 'center',
          render: (h, params) => {
            return h('span', this.gameShow[params.row.game_hash])
          },
          width: 200
        },
        {
          title: 'openid',
          align: 'center',
          key: 'openid',
          render: (h, params) => {
            if (params.row.openid) {
              return h('span', params.row.openid)
            } else {
              return h('span', '-')
            }
          },
          minWidth: 260
        },
        {
          title: '角色ID',
          align: 'center',
          key: 'id',
          tooltip: true,
          minWidth: 160
        },
        {
          title: '职业',
          align: 'center',
          key: 'hero_id',
          render: (h, params) => {
            if (params.row.hero_id === 1001) {
              // return h('span', '驭剑者')
            } else if (params.row.hero_id === 1002) {
              return h('span', '剑影（狐狸）')
            } else if (params.row.hero_id === 1004) {
              return h('span', '炎刃（狼）')
            } else if (params.row.hero_id === 1005) {
              return h('span', '灵剑师（虎）')
            } else if (params.row.hero_id === 1006) {
              return h('span', '双弩游侠（猞猁）')
            } else {
              return h('span', '')
            }
          },
          tooltip: true,
          width: 150
        },
        {
          title: '等级',
          align: 'center',
          key: 'level',
          tooltip: true,
          minWidth: 120
        },
        {
          title: '战令到期',
          align: 'center',
          render: (h, params) => {
            if (params.row.daily_vip > 0) {
              return h('span', this.formattedTime(params.row.daily_vip))
            } else {
              return h('span', '-')
            }
          },
          minWidth: 180
        },
        {
          title: '周卡到期',
          align: 'center',
          render: (h, params) => {
            if (params.row.week_vip > 0) {
              return h('span', this.formattedTime(params.row.week_vip))
            } else {
              return h('span', '-')
            }
          },
          minWidth: 180
        },
        {
          title: '月卡到期',
          align: 'center',
          key: 'id',
          render: (h, params) => {
            if (params.row.month_vip > 0) {
              return h('span', this.formattedTime(params.row.month_vip))
            } else {
              return h('span', '-')
            }
          },
          minWidth: 180
        },
        {
          title: '至尊月卡到期',
          align: 'center',
          key: 'id',
          render: (h, params) => {
            if (params.row.extreme_month_vip > 0) {
              return h('span', this.formattedTime(params.row.extreme_month_vip))
            } else {
              return h('span', '-')
            }
          },
          minWidth: 180
        },
        {
          title: '迷惘战令到期',
          align: 'center',
          key: 'id',
          render: (h, params) => {
            if (params.row.lost_tower_vip > 0) {
              return h('span', this.formattedTime(params.row.lost_tower_vip))
            } else {
              return h('span', '-')
            }
          },
          minWidth: 180
        }
      ],
      keyData: [],
      keyShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      buildKeyInfo: {
        uid: '',
        game_hash: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      buttonShow: {
        edit: true,
        key: true,
        del: true
      },
      listLoading: false,
      total: {},
      userInfo: {},
      reOpenParms: {
        show: false,
        id: 0,
        isDelItem: 'no',
        isDelEquipment: 'no'
      }
    }
  },
  created () {
    let vm = this
    vm.getList()
    vm.getGameName()
    vm.hasRule('Order/backOrder').then(res => {
      vm.buttonShow.edit = res
    })
    vm.hasRule('Chat/mute').then(res => {
      vm.buttonShow.del = res
    })
  },
  mounted () {
    let vm = this
    vm.onlineCount()
    // const timer = setInterval(() => {
    //   vm.onlineCount()
    // }, 2000)
    // this.$once('hook:beforeDestroy', () => {
    //   clearInterval(timer)
    // })
  },
  methods: {
    getGameName (value) {
      if (!this.gameNameOption.length) {
        getChoose({
          keyword: value
        }).then(response => {
          this.gameNameOption = response.data.data.list
          this.gameNameOption.forEach(i => {
            this.gameShow[i.value] = i.label
          })
        })
      }
    },
    getKeyList () {
      let vm = this
      vm.keySetting.listLoading = true
      roleList({
        page: vm.keyShow.currentPage,
        size: vm.keyShow.pageSize,
        uid: vm.buildKeyInfo.uid,
        game_hash: vm.buildKeyInfo.game_hash
      }).then(response => {
        vm.keyData = response.data.data.list
        vm.keyShow.listCount = response.data.data.count
        vm.keySetting.listLoading = false
      })
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      vm.listLoading = true
      getList(params).then(response => {
        vm.tableData = response.data.data.list
        vm.total = response.data.data.total
        if (response.data.data.userInfo) {
          vm.userInfo = response.data.data.userInfo
        }
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    },
    onlineCount () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      onlineCount(params).then(response => {
        vm.onlineUserCount = response.data.data.onlineCount
      })
    },
    reOpen () {
      blackUser({
        id: this.reOpenParms.id,
        game_hash: this.reOpenParms.game_hash,
        isDelItem: this.reOpenParms.isDelItem,
        isDelEquipment: this.reOpenParms.isDelEquipment
      }).then(response => {
        this.resetReOpenParms()
        this.$Message.success(response.data.msg)
        this.getList()
      })
    },
    resetReOpenParms () {
      this.reOpenParms.show = false
      this.reOpenParms.id = 0
      this.reOpenParms.isDelItem = 'no'
      this.reOpenParms.isDelEquipment = 'no'
    },
    formattedTime (unixTimestamp) {
      // 将Unix时间戳转换为毫秒
      let unixTimestampMilliseconds = unixTimestamp * 1000

      // 创建一个Date对象
      let date = new Date(unixTimestampMilliseconds)

      // 使用Date对象的方法来获取年、月、日、时、分、秒等信息
      let year = date.getFullYear()
      let month = String(date.getMonth() + 1).padStart(2, '0')
      let day = String(date.getDate()).padStart(2, '0')
      let hours = String(date.getHours()).padStart(2, '0')
      let minutes = String(date.getMinutes()).padStart(2, '0')
      let seconds = String(date.getSeconds()).padStart(2, '0')

      // 构建时间格式字符串
      let formattedTimeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`

      return formattedTimeStr
    }
  }
}
</script>
